<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>AdminLTE 3 | Vue3</title>

		<!-- Google Font: Source Sans Pro -->
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
		<!-- Font Awesome Icons -->
		<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
		<!-- Theme style -->
		<link rel="stylesheet" href="css/adminlte.min.css">
	</head>
	<body>
		<div id="app">
			<lte-layout>
				<!-- Header -->
				<lte-navbar class="navbar-white navbar-light main-header" style="min-height:3.5rem;">
					<lte-navbar-nav>
						<lte-nav-item>
							<lte-push-menu />
						</lte-nav-item>
					</lte-navbar-nav>
					<!-- full-fill为true时，该navbar的宽度将占满剩余空间 -->
					<!-- lte-nav-item靠右排列 -->
					<lte-navbar-nav :full-fill="true">
						<lte-nav-item>
							<lte-messagebox :total="messages.total" :messages="messages.list" align="right" />
						</lte-nav-item>
						<lte-nav-item>
							<lte-notification :total="notifications.total" :notifications="notifications.list" align="right" />
						</lte-nav-item>
						<lte-nav-item :hide-in-phone="true">
							<lte-full-screen />
						</lte-nav-item>
						<lte-nav-item>
							<lte-push-controlsidebar />
						</lte-nav-item>
					</lte-navbar-nav>
				</lte-navbar>

				<!-- 左侧菜单 -->
				<lte-main-sidebar>
					<lte-main-sidebar-logo url="#/" title="AdminLTE 3 + Vue3" logo="img/AdminLTELogo.png"></lte-main-sidebar-logo>
					<lte-sidebar>
						<lte-user-panel title="Alexander Pierce" avatar="img/user2-160x160.jpg"></lte-user-panel>
						<div class="form-inline">
							<div class="input-group" data-widget="sidebar-search">
								<input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
								<div class="input-group-append">
									<button class="btn btn-sidebar">
										<i class="fas fa-search fa-fw"></i>
									</button>
								</div>
							</div>
							<div class="sidebar-search-results">
								<div class="list-group">
									<a href="#" class="list-group-item">
										<div class="search-title"><strong class="text-light"></strong>N<strong class="text-light"></strong>o<strong
											 class="text-light"></strong> <strong class="text-light"></strong>e<strong class="text-light"></strong>l<strong
											 class="text-light"></strong>e<strong class="text-light"></strong>m<strong class="text-light"></strong>e<strong
											 class="text-light"></strong>n<strong class="text-light"></strong>t<strong class="text-light"></strong>
											<strong class="text-light"></strong>f<strong class="text-light"></strong>o<strong class="text-light"></strong>u<strong
											 class="text-light"></strong>n<strong class="text-light"></strong>d<strong class="text-light"></strong>!<strong
											 class="text-light"></strong>
										</div>
										<div class="search-path"></div>
									</a>
								</div>
							</div>
						</div>
						<nav class="mt-2">
							<lte-treeview :items="menus"></lte-treeview>
						</nav>
					</lte-sidebar>
				</lte-main-sidebar>

				<!-- 工作区 -->
				<lte-main-content style="padding-top:5px">
					<blockquote>
						<h5>本节简介</h5>
						<ul>
							<li>演示路由,菜单跟随当前浏览器路径自动选中</li>
						</ul>
					</blockquote>
					<div class="container">
						<!-- 路由出口 -->
						<!-- 路由匹配到的组件将渲染在这里 -->
						<router-view></router-view>
					</div>
				</lte-main-content>

				<!-- 系统设置区 -->
				<lte-control-sidebar>
					<div class="p-3 control-sidebar-content" style="overflow-y: auto;height: 100%;">
						<h5>Customize AdminLTE</h5>
						<hr class="mb-2">
						<div class="mb-1">
							<div class="custom-control custom-switch">
								<input type="checkbox" class="custom-control-input" id="lte-vue-darkModeSwitch" @change="toggleDarkMode">
								<label class="custom-control-label" for="lte-vue-darkModeSwitch">Dark Mode</label>
							</div>
						</div>
						<div class="mb-1">
							<div class="custom-control custom-switch">
								<input type="checkbox" class="custom-control-input" id="lte-vue-headerFixed" @change="toggleHeaderFixed">
								<label class="custom-control-label" for="lte-vue-headerFixed">Header Fixed</label>
							</div>
						</div>
						<div class="mb-1">
							<div class="custom-control custom-switch">
								<input type="checkbox" class="custom-control-input" id="lte-vue-footerFixed" @change="toggleFooterFixed">
								<label class="custom-control-label" for="lte-vue-footerFixed">Footer Fixed</label>
							</div>
						</div>
						<div class="mb-4">
							<div class="custom-control custom-switch">
								<input type="checkbox" class="custom-control-input" id="lte-vue-sidebarFixed" @change="toggleSidebarFixed">
								<label class="custom-control-label" for="lte-vue-sidebarFixed">Sidebar Fixed</label>
							</div>
						</div>
					</div>
				</lte-control-sidebar>

				<!-- 底部页脚 -->
				<lte-main-footer>
					<lte-copy-right></lte-copy-right>
					<lte-version></lte-version>
				</lte-main-footer>
			</lte-layout>
		</div>
		<!-- ./wrapper -->

		<script src="js/vue.global.js"></script>
		<!-- 路由 -->
		<script src="js/vue-router.global.js"></script>
		<!-- Event Bus -->
		<script src="js/mitt.umd.js"></script>
		<!-- 动画脚本 -->
		<script src="js/animations.js"></script>

		<!-- Components -->
		<script src="js/Layout.js"></script>
		<script src="js/FullScreen.js"></script>
		<script src="js/PushMenu.js"></script>
		<script src="js/UserPanel.js"></script>
		<script src="js/Logo.js"></script>
		<script src="js/CopyRight.js"></script>
		<script src="js/Version.js"></script>
		<script src="js/ControlSidebar.js"></script>
		<script src="js/PushControlSidebar.js"></script>
		<script src="js/Navbar.js"></script>
		<script src="js/NavbarNav.js"></script>
		<script src="js/NavItem.js"></script>
		<script src="js/MainSidebar.js"></script>
		<script src="js/Notification.js"></script>
		<script src="js/MessageBox.js"></script>
		<!-- Components End -->

		<!-- 菜单数据 -->
		<script src="js/routerMenuData.js"></script>
		<!-- 通知数据 -->
		<script src="js/notificationData.js"></script>
		<!-- 消息数据 -->
		<script src="js/messageData.js"></script>

		<script type="text/javascript">
			if (!window.emitter) {
				window.emitter = mitt();
			}

			var menus = menus || [];
			const app = Vue.createApp({
				// 必须是函数形式
				data() {
					return {
						message: "Hello Vue!",
						menus: menus,
						notifications: notifications,
						messages: messages
					}
				},
				methods: {
					toggleDarkMode(e) {
						//console.log(e.target.checked)
						if (window.emitter) {
							if (e.target.checked) {
								window.emitter.emit('dark-mode');
							} else {
								window.emitter.emit('un-dark-mode');
							}
						} else {
							console.warn("missed mitt.")
						}
					},
					toggleHeaderFixed(e) {
						if (window.emitter) {
							if (e.target.checked) {
								window.emitter.emit('layout-header-fixed');
							} else {
								window.emitter.emit('un-layout-header-fixed');
							}
						} else {
							console.warn("missed mitt.")
						}
					},
					toggleFooterFixed(e) {
						if (window.emitter) {
							if (e.target.checked) {
								window.emitter.emit('layout-footer-fixed');
							} else {
								window.emitter.emit('un-layout-footer-fixed');
							}
						} else {
							console.warn("missed mitt.")
						}
					},
					toggleSidebarFixed(e) {
						if (window.emitter) {
							if (e.target.checked) {
								window.emitter.emit('layout-sidebar-fixed');
							} else {
								window.emitter.emit('un-layout-sidebar-fixed');
							}
						} else {
							console.warn("missed mitt.")
						}
					}
				}
			});

			app.component('lte-layout', Layout);
			app.component('lte-push-menu', PushMenu);
			app.component('lte-full-screen', FullScreent);
			app.component('lte-main-sidebar-logo', Logo);
			app.component('lte-copy-right', CopyRight);
			app.component('lte-version', Version);
			app.component('lte-control-sidebar', ControlSidebar);
			app.component('lte-push-controlsidebar', PushControlSidebar);
			app.component('lte-user-panel', UserPanel);
			app.component('lte-navbar', Navbar);
			app.component('lte-navbar-nav', NavbarNav);
			app.component('lte-nav-item', NavItem);
			app.component('lte-main-sidebar', MainSidebar);
			app.component('lte-notification', Notification);
			app.component('lte-messagebox', MessageBox);

			app.component('lte-switch', {
				template: `
				<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-focused bootstrap-switch-animate bootstrap-switch-on"
				 style="width: 88.6666px;">
					<div class="bootstrap-switch-container" style="width: 130px; margin-left: 0px;"><span class="bootstrap-switch-handle-on bootstrap-switch-primary"
						 style="width: 43px;">ON</span><span class="bootstrap-switch-label" style="width: 43.3333px;">&nbsp;</span><span
						 class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 43px;">OFF</span><input type="checkbox"
						 name="my-checkbox" checked="" data-bootstrap-switch=""></div>
				</div>
				`
			})

			// TODO: 以下组件需要斟酌
			app.component('lte-treeview', {
				props: {
					items: Array
				},
				data() {
					return {
						activeId: 2
					}
				},
				computed: {
					parentId() {
						for (var i = 0; i < this.items.length; i++) {
							var item = this.items[i];
							if (item.id == this.activeId) {
								return item.id;
							}
							if (item.children && item.children.length > 0) {
								for (var j = 0; j < item.children.length; j++) {
									var child = item.children[j];
									if (child.id == this.activeId) {
										return child.parentId;
									}
								}
							}
						}
						return null;
					}
				},
				methods: {
					menuSelect(event, id, url) {
						//console.log("menuSelect", id, url, event);
						if (id) this.activeId = id;
						// 外链不阻止默认行为
						if (url && url.indexOf("http") === -1) {
							event.preventDefault();
							// 通过router的api进行导航跳转
							this.$router.push(url);
						}
					}
				},
				template: `<ul class="nav nav-pills nav-sidebar nav-child-indent" data-widget="treeview" role="menu" data-accordion="false">
		      <template v-for="menu of items">
			  <lte-treeview-menu 
				:activeId="activeId" 
				:active="parentId == menu.id" 
				:opened="parentId == menu.id" 
				:menu="menu"
				@menu-select="menuSelect"></lte-treeview-menu>
			  </template>
		    </ul>`
			});

			app.component('lte-treeview-menu', {
				props: {
					menu: Object,
					active: {
						type: Boolean,
						default: function() {
							return false;
						}
					},
					activeId: Number | String,
					opened: {
						type: Boolean,
						default: function() {
							return false;
						}
					}
				},
				data() {
					return {
						// 菜单是否打开必须由此属性判断，否则视图更新时会丢失打开状态
						isOpen: this.opened
					}
				},
				methods: {
					collapse(event) {
						const li = this.$el;
						var el = li.lastChild;
						var that = this;
						slideUp(el, {
							after: function() {
								el.style.overflow = "";
								el.style.height = "";
								li.classList.remove("menu-open");
								that.isOpen = false;
							},
							speed: 300 /*为了演示动画速度*/
						})
					},
					open() {
						const li = this.$el;
						var el = li.lastChild;
						// 页面初始化时，路由守卫生效，但元素可能还未准备好
						// 元素如果未准备好，直接返回
						if (!el.tagName) return;
						this.isOpen = true;
						// 仅依靠 isOpen变更来更新视图会有一个延时，所以这里直接将样式加上
						li.classList.add("menu-open");
						slideDown(el, {
							after: function() {
								el.style.overflow = "";
								el.style.height = "";
							},
							speed: 300 /*为了演示动画速度*/
						});
					},
					toggle(event) {
						if (!this.menu.children || this.menu.children.length == 0) {
							if (this.menu.url && this.menu.url.indexOf("http") !== 0) {
								this.$emit('menuSelect', event, this.menu.id, this.menu.url);
							}
							return;
						}
						// 如果有子菜单，阻止默认行为
						event.preventDefault()
						//console.log("isOpen", this.isOpen);
						if (this.isOpen) {
							this.collapse();
						} else {
							this.open();
						}
					}
				},
				mounted() {
					if (window.emitter) {
						window.emitter.on('open-menu', obj => {
							//console.log("open-menu", obj, this.isOpen);
							if (obj.parentId == this.menu.id) {
								this.$emit('menuSelect', event, obj.childId || obj.parentId);
								!this.isOpen && this.open();
							}
						});
					}
				},
				template: `<li :class="{
					'menu-open':isOpen,
					'nav-item': menu.type != 'label',
					'nav-header': menu.type == 'label'
				   }">
				<template v-if="menu.type == 'label'">{{menu.title}}</template>
		        <a :href="menu.url || ''" :target="menu.target" class="nav-link" :class="active ? 'active':''"
				  @click="toggle"
				  v-if="menu.type!='label'">
		          <i class="nav-icon" :class="menu.icon"></i>
		          <p>
		            {{menu.title}}
		            <i class="right fas fa-angle-left" v-if="menu.children != null && menu.children.length > 0"></i>
					<span class="right badge badge-danger" v-if="menu.isNew && !menu.messageCount">New</span>
					<span class="badge badge-info right" v-if="menu.messageCount > 0">{{menu.messageCount}}</span>
		          </p>
		        </a>
		        <ul class="nav nav-treeview" 
				  v-if="menu.type!='label' && menu.children != null && menu.children.length > 0">
		          <li class="nav-item" v-for="child of menu.children">
		            <a class="nav-link"
						:class="activeId == child.id ? 'active':''"
						:href="child.url"
						:target="child.target"
						@click="$emit('menuSelect',$event, child.id, child.url)">
		              <i class="nav-icon" :class="child.icon || 'far fa-circle'"></i>
		              <p>
						{{child.title}}
						<span class="right badge badge-danger" v-if="child.isNew">New</span>
					  </p>
		            </a>
		          </li>
		        </ul>
		      </li>`
			});

			app.component('lte-sidebar', {
				template: '<div class="sidebar" style="overflow-y: auto;"><slot><p style="color:white;">Menu</p></slot></div>'
			})

			app.component('lte-main-content', {
				template: `<div class="content-wrapper">
			<slot></slot>
		</div>`,
			});

			app.component('lte-main-footer', {
				template: `<footer class="main-footer" style="min-height:3.5rem;">
			<slot></slot>
		</footer>`,
			});
			
			// 1. 定义路由组件.
			// 也可以从其他文件导入
			const Home = { template: '<div>Home</div>' }
			const About = { template: '<div>About</div>' }
			// 2. 定义一些路由
			// 每个路由都需要映射到一个组件。
			const routes = [
			  { path: '/', component: Home },
			  { path: '/about', component: About },
			]
			
			// 3. 创建路由实例并传递 `routes` 配置
			// 你可以在这里输入更多的配置，但我们在这里
			// 暂时保持简单
			const router = VueRouter.createRouter({
			  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
			  history: VueRouter.createWebHashHistory(),
			  routes, // `routes: routes` 的缩写
			})
			
			// 全局路由守卫
			router.beforeEach((to, from) => {
			  const menus = vm.$data.menus;
			  for (var i = 0; i < menus.length; i++) {
				var item = menus[i];
			  	if (item.url == to.path) {
					window.emitter.emit('open-menu', {parentId:item.id});
					return true;
				}
				if (item.children && item.children.length > 0) {
					for (var j = 0; j < item.children.length; j++) {
						var child = item.children[j];
						if (child.url == to.path) {
							//console.log(".....", item.id, child.id);
							window.emitter.emit('open-menu', {parentId:item.id, childId:child.id});
							return true;
						}
					}
				}
			  }
			  // 返回 false 以取消导航
			  return true
			})
			
			// 5. 创建并挂载根实例
			//const app = Vue.createApp({})
			//确保 _use_ 路由实例使
			//整个应用支持路由。
			app.use(router)
			
			
			// 挂载之前定义好组件，否则组件不生效
			const vm = app.mount('#app');
			console.log("it works!");
		</script>
		<style>
			/* 菜单选中时，父级菜单背景色渐显效果 */
			.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
			.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
				transition: background ease-in-out .3s, width ease-in-out .3s;
			}
		</style>
	</body>
</html>
